<script setup>
import {ref, reactive, onMounted} from 'vue'
//import {useMembersStore} from '@/store/members'
//import {useMemberCardStore} from '@/store/memberCard'
//import {useMemberCardRelationStore} from '@/store/memberCardRelation'
import { storeToRefs } from 'pinia'
import {ElMessage} from 'element-plus'
import memberApi from '@/api/member'
import memberCardApi from '@/api/memberCard'
import memberCardBindApi from '@/api/memberCardBind'

// 状态数据
//const membersStore = useMembersStore()
//const {members} = storeToRefs(membersStore)
//const memberCardStore = useMemberCardStore()
//const {memberCards} = storeToRefs(memberCardStore)
//const memberCardRelationStore = useMemberCardRelationStore()

const members = ref([])
const memberCards = ref([])

// 表单数据
const form = reactive({
    memberId: null,
    memberCardId: null,
    rechargeTimes: 0,
    validityPeriod: 0,
    receivedAmount: 0,
    paymentMethod: '',
    remark: ''
})

const onSubmit = async () => {
    //memberCardRelationStore.addMemberCardRelation(form)
    await memberCardBindApi.bindMemberCard(form)
    form.memberId = null
    form.memberCardId = null
    form.rechargeTimes = 0
    form.validityPeriod = 0
    form.receivedAmount = 0
    form.paymentMethod = ''
    form.remark = ''
}

const rules = {
    memberId: [{ required: true, message: '此字段为必填', trigger: 'blur' }],
    memberCardId: [{ required: true, message: '此字段为必填', trigger: 'blur' }],
}

const fetchData = async () => {
    let res = await memberApi.getMembers()
    members.value = res.data
    res = await memberCardApi.getMemberCards()
    memberCards.value = res.data
}

onMounted(() => {
    fetchData()
})
</script>

<template>
    <el-form :model="form" style="margin-left: 30px" label-position="right" label-width="100px" :rules="rules">
        <el-form-item label="会员" prop="memberId">
            <el-select v-model="form.memberId" placeholder="请选择绑定的会员" style="width: 600px">
                <el-option v-for="item in members" :key="item.id" :label="item.memberName" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="选择会员卡" prop="memberCardId">
            <el-select v-model="form.memberCardId" placeholder="请选择绑定的会员卡" style="width: 600px">
                <el-option v-for="item in memberCards" :key="item.id" :label="item.memberCardName" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-divider/>
        <el-form-item label="充值次数" prop="rechargeTimes">
            <el-input-number v-model="form.rechargeTimes"></el-input-number>
        </el-form-item>
        <el-form-item label="有效期" prop="validityPeriod">
            <el-input-number v-model="form.validityPeriod"></el-input-number>
        </el-form-item>
        <el-form-item label="已收金额" prop="receivedAmount">
            <el-input-number v-model="form.receivedAmount"></el-input-number>
        </el-form-item>
        <el-form-item label="选择支付方式" prop="paymentMethod" style="width: 600px">
            <el-select v-model="form.paymentMethod" placeholder="请选择支付方式">
                <el-option value="现金"></el-option>
                <el-option value="支付宝"></el-option>
                <el-option value="微信"></el-option>
                <el-option value="银行卡"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="form.remark" style="width: 600px;"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">确认</el-button>
        </el-form-item>
    </el-form>
</template>

<style scoped>

</style>
